<template>
  <modal v-model="value" @click.self.native="$emit('input', false)">
    <div class="select-play-list" :class="{show: value}">
      <div class="title">选择歌单</div>
      <loading v-if="loading" title="加载中..." />
      <ul class="play-list" v-else>
        <li class="item" v-for="item in playList" :key="item.id" @click="select(item)">
          <img class="img" :src="item.coverImgUrl + '?param=64y64'">
          <div class="name" v-text="item.name" />
        </li>
      </ul>
    </div>

  </modal>
</template>

<script>
import { GetUserPlayList } from 'api/user'
import loading from './loading/loading'
import modal from './modal'

export default {
  name: 'select-play-list',
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      playList: []
    }
  },
  methods: {
    getMyPlayList () {
      const { user } = this.$store.state
      this.loading = true
      GetUserPlayList(user.userId).then(list => {
        this.loading = false
        if (list.length && list[0].name.includes(user.name + '喜欢的音乐')) {
          this.$store.dispatch('user/change_state', { key: 'favoriteSongList', value: list[0] })
          list.splice(0, 1)
        }
        this.$store.dispatch('user/change_state', { key: 'favoriteSongList', value: list })
        this.playList = list.filter(item => item.userId === user.userId)
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    select (playlist) {
      this.$emit('select', playlist)
    }
  },
  watch: {
    value (value) {
      if (value) this.getMyPlayList()
    }
  },
  components: { modal, loading }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";

  .select-play-list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    background: @color-base;
    transition: transform .3s;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    .title {
      padding: 12px 10px;
      color: @color-text;
      text-align: left;
      font-size: @font-size-large;
      font-weight: bold;
    }
    .play-list {
      max-height: 55vh;
      overflow-y: scroll;
      .item {
        padding: 6px 20px;
        display: flex;
        align-items: center;
        .img { border-radius: 12px }
        .name {
          padding-left: 12px;
          font-size: @font-size-medium-x;
        }
      }
      .item:active { background: @color-background }
    }
  }
  .select-play-list.show { transform: translateY(0) }
</style>
